<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>几个注意事项</title>
  <script src="../js/vue.js"></script>

</head>
<body> 

   <div id="root">
       
      <!-- <Hello></Hello>  -->
      <my-hello></my-hello>
   </div>

   <script type='text/javascript'>
      
      
      const hello = Vue.extend({
         template:`
             <div>
               <h1>Hello</h1>
             </div>
         `,
      })

      new Vue({
              el:'#root',
              components:{
                //  hello
                // (1) 一个单词 首字母可以小写也可以大，推荐大写，符合开发者工具显示的样子
                // Hello:hello
                /**
                 * (2) 两个单词 有两种
                 *     1.my-hello，但是js不支持，那就加引号
                 *     2.MyHello，大驼峰，但是只能在脚手架中生效，也就是现在不能用
                 *                会自动换成myhello，先用第一种。
                 *       使用大驼峰的原因是 毕竟是个组件，不再像普通变量那样小驼峰
                 * */ 
                 'my-hello':hello
              }
          })
   </script>


  
    
</body>
</html>